<template>
    <div class="demo">
        <h2>学生姓名:{{name}}</h2>
        <h2>性别:{{sex}}</h2>
        <h2>年龄:{{myAge}}</h2>
        <button @click="updateAge">尝试修改收到的年龄</button>
    </div>
</template>

<script>
    //暴露组件
    export default {
        name: 'Student',
        data(){
            return{
                myAge:this.age
            }
        },
        methods:{
            updateAge(){
                this.myAge++;
                alert(this.myAge);
                console.log(this);
            }
        },
        //简单声明接收组件标签的参数
        //props:['name','sex','age']

        //接收的同时对数据的类型进行限制
        // props:{
        //     name:String,
        //     sex:String,
        //     age:Number
        // }

        //接收的同时对数据：类型进行限制+默认值的指定+必要性的限制
        props:{
            name:{
                type:String,//name的类型是字符串
                required:true//name是必要的
            },
            age:{
                type:Number,
                default:99//默认值
            },
            sex:{
                type:String,
                required:true
            }
        }
    }
</script>

<style>
    .demo{
        background-color: skyblue;
    }
</style>